<template>
  <div>
    <el-row>
      <el-col :span="12">
        <div class="grid-content">
          <el-button
            v-if="option.addBtn !== false"
            type="primary"
            size="small"
            icon="el-icon-plus"
            style="Float:left;height:30px"
            @click="handleRowSave"
          />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content">
          <!-- 暂时 仅考虑 按照一列进行搜索. 按照多列如何搜索, 页面待设计 -->
          <el-input
            v-model="searchInput"
            :placeholder="option.searchBox.placeholder"
            style="width:300px;float:right"
            @keyup.enter.native="handleSearch"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="handleSearch"
            />
          </el-input>
        </div>
      </el-col>
    </el-row>

    <TableList
      :loading="loading"
      :data="data"
      :columns="option.columns"
      :index="option.indexColumn"
      :handle-btn="option.handleBtn"
      @row-link="handleRowLink"
      @row-view="handleRowView"
      @row-update="handleRowUpdate"
      @row-del="handleRowDel"
      @sort-change="handleSortChange"
    >
      <template slot="button" slot-scope="{ row }">
        <slot name="button" :row="row" />
      </template>
    </TableList>

    <Pagination
      :page-sizes="option.pagination.pageSizes"
      :total="option.pagination.total || 0"
      :page.sync="paginationMe.page"
      :limit.sync="paginationMe.limit"
      @pagination="handlePagination"
    />

    <ViewDialog
      :visible.sync="viewDialogVisible"
      :data="currentRow"
      :columns="option.viewColumns"
    />

    <FormDialog
      :visible.sync="formDialogVisible"
      :data="currentRow"
      :option="option"
      :columns="option.formColumns"
      :config="option.formDialog"
      @submit="handleFormSubmit"
    />
  </div>
</template>

<script>
import odooConfig from '@/../odoo.config'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

import TableList from '@/components2/ListPage/TableList'

import ViewDialog from '@/components2/ViewDialog'
import FormDialog from '@/components2/FormDialog'

export default {
  name: 'ListPage',
  components: { Pagination, TableList, ViewDialog, FormDialog },
  directives: {},
  filters: {},

  props: {
    data: { type: Array, default: () => [] },
    option: { type: Object, default: () => {} }
    // pagination: { type: Object, default: () => {} }
  },

  data() {
    return {
      //
      debug: odooConfig.debug,
      loading: false,

      searchInput: '',
      paginationMe: {},

      viewDialogVisible: false,
      currentRow: {},

      formDialogVisible: false
    }
  },

  computed: {
    //
  },

  async created() {
    //
  },

  methods: {
    async asyncSelectOptions(kwargs) {
      // call by FormDialog
      return this.$parent.asyncSelectOptions(kwargs)
    },

    handleSearch() {
      // TBD 2020-3-15 目前仅实现了 按照一个字段，like 方法，进行搜索

      const field = this.option.searchBox.name
      let op = this.option.searchBox.type
      let value = this.searchInput

      if (op === 'eq_ilike__left') {
        op = 'eq_ilike'
        value = `${value}%`
      }

      const op2 = op ? `___${op}` : ''

      const domain = {}

      if (this.searchInput) {
        domain[`${field}${op2}`] = value
      }

      this.$emit('search-change', domain)
    },

    handleRowLink(row) {
      this.$emit('row-link', row)
    },

    handleRowView(row) {
      this.currentRow = { ...row }
      this.viewDialogVisible = true
    },

    handleRowSave() {
      this.currentRow = {}
      this.formDialogVisible = true
    },

    handleRowUpdate(row) {
      this.currentRow = { ...row }
      this.formDialogVisible = true
    },

    handleRowDel(row) {
      this.rowDel(row)
    },

    handleFormSubmit(formData) {
      if (formData.id) {
        this.rowUpdate(formData)
      } else {
        this.rowSave(formData)
      }
    },

    rowSave(form) {
      this.loading = true
      this.$emit(
        'row-save',
        form,
        () => {
          this.formDialogVisible = false
        },

        () => {
          this.loading = false
          this.$message({ type: 'success', message: '创建成功!' })
        }
      )
    },

    rowUpdate(row) {
      this.loading = true
      this.$emit(
        'row-update',
        row,
        () => {
          this.formDialogVisible = false
        },
        () => {
          this.loading = false
          this.$message({ type: 'success', message: '编辑成功!' })
        }
      )
    },

    rowDel(row) {
      this.loading = true
      this.$emit('row-del', row, () => {
        this.loading = false
        this.$message({ type: 'success', message: '删除成功!' })
      })
    },

    handlePagination() {
      this.$emit('page-change', this.paginationMe)
    },

    handleSortChange(sort) {
      this.$emit('sort-change', sort)
    }
  }
}
</script>
